<template>
  <div>
    <!-- <input type="text" v-model="value" v-maxLength="10" />
    <span>0/0</span>
    <br /> -->

    <CounterS :maxLength="maxLength" :val="value" @newVal="newVal">
      <input type="text" v-model="value" ref="ipt" />
    </CounterS>
    <CounterN :maxLength="maxLength" :valLength="valLength"></CounterN>
  </div>
</template>

<script>
import CounterS from "../components/Counter_s";
import CounterN from "../components/Counter_n";
export default {
  data() {
    return {
      value: "",
      valLength: 0,
      maxLength: 20,
    };
  },
  directives: {
    // maxLength: {
    //   inserted(el, binding) {
    //     el.nextSibling.innerText = `0/${binding.value}`;
    //   },
    //   update(el, binding) {
    //     el.nextSibling.innerText = `${el.value.length}/${binding.value}`;
    //     if (el.value.length >= binding.value) {
    //       el.style.color = "red";
    //       el.setAttribute("maxlength", binding.value);
    //     } else {
    //       el.style.color = "#000";
    //     }
    //   },
    // },
  },
  methods: {
    newVal(val) {
      this.valLength = val;
      if (this.valLength >= this.maxLength) {
        this.$refs.ipt.style.color = "red";
        this.$refs.ipt.setAttribute("maxlength", this.maxLength);
      } else {
        this.$refs.ipt.style.color = "#000";
      }
    },
  },
  components: {
    CounterS,
    CounterN,
  },
};
</script>

<style scoped></style>
